<template>
	<PageContainer :show-header="false" :bgStyle="{'padding': 0}">
		<view class="profile-container">
			<UserContent />
			<view class="menu-content">
				<template v-for="item in menuList">
					<MenuItemBox :menu="item" :key="item.name" />
				</template>
			</view>
		</view>
	</PageContainer>
</template>

<script>
	import PageContainer from '@/components/PageContainer/PageContainer.vue';
	import store from '@/store'
	import {
		menuList
	} from './data';
	import UserContent from './components/UserContent/UserContent.vue';
	import MenuItemBox from './components/MenuItemBox/MenuItemBox.vue';
	export default {
		components: {
			PageContainer,
			UserContent,
			MenuItemBox,
		},
		computed: {
			menuList() {
				const {
					user
				} = store.state;
				return menuList.filter(item => item.type === user.type || !item.type);
			}
		},
		methods: {
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/index'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.profile-container {
		.menu-content {
			margin: 8px 0;
			padding: 14rpx 40rpx;
			background-color: #f9f9f9;
		}
	}
</style>